<!-- 商品列表 -->
<template>
   <div>
      <div>
         <!-- 头部 -->
         <el-input size="" class="input-length" placeholder="请输入商品名称" v-model="list.title" />
         <el-input size="" class="input-length" placeholder="请输入商品条形码"  v-model="list.barcode"/>
         <el-select placeholder="选择商品状态" style="width: 200px;margin-right: 10px;" v-model="list.status">
            <el-option label="在售" :value="1" />
            <el-option label="未售" :value="0" />
         </el-select>
         <el-select placeholder="请选择类目" style="width: 200px;margin-right: 10px;" v-model="list.categoryId">
            <el-option />
         </el-select>
         <el-button type="primary" :icon="Search" @click="init()">查找</el-button>
         <el-button type="primary" :icon="Plus" @click="router.replace('/index/goodstube/create')" 
         v-perminsstion="'product:product:create'">添加</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" ref="multipleTableRef" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
    <el-table-column type="expand" label="sku信息">
      <template #default="props">
        <div m="4">
         <!-- 内层表格 -->
          <el-table :data="props.row.skuList" border>
            <el-table-column label="商品条形码" prop="barCode" />
            <el-table-column label="商品规格" prop="specification" />
            <el-table-column label="商品库存" prop="stock" />
            <el-table-column label="原价" prop="originalPrice" />
            <el-table-column label="现价" prop="price" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品ID" prop="id" width="80" align="center"/>
    <el-table-column label="名称" prop="title" />
    <el-table-column label="图片" prop="img" width="80" align="center">
      <template #default="scope"><img :src="scope.row.img" alt="" style="width: 50px;height: 50px;"></template>
   </el-table-column>
    <el-table-column label="商品详细介绍" prop="name" width="120" align="center">
      <template #default="scope">
                  <el-button size="small" type="primary" @click="info(scope.row.id)">查看</el-button>
            </template>
    </el-table-column>
    <el-table-column label="类目ID" prop="categoryId" width="80" align="center"/>
    <el-table-column label="邮费模板ID" prop="freightTemplateId" width="80" align="center"/>
    <el-table-column label="销量" prop="sales" width="80" align="center"/>
    <el-table-column label="单位" prop="unit" width="80" align="center"/>
    <el-table-column label="是否在售" prop="status" width="100" align="center">
      <template #default="scope"><el-tag :type="scope.row.status?'success':'info'">{{ scope.row.status?'在售':'未售' }}</el-tag></template></el-table-column>
    <el-table-column label="描述" prop="description" width="80" align="center"/>
    <el-table-column label="操作" prop="name"  align="center">
      <template #default="scope">
               <div>
                  <el-button size="small" type="primary" @click="handleupdate(scope.row.id)" 
                  v-perminsstion="'product:product:create'">编辑</el-button>
                  <el-button size="small" :type="scope.row.status?'warning':'primary'" 
                   @click="handlegrounding(scope.row)">{{scope.row.status?'下架':'上架'}}</el-button>
               </div>
            </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" class="dialog" title="商品详情" :show-close="false" width="790">
            <div v-html="details.detail"></div>
        </el-dialog>
<Paging v-bind="pagination" @emitfather="CurrentList"></Paging>
   </div>
</template>
<script setup lang="ts">
import { post,get } from '@/utlis/http';
import { Plus, Search } from '@element-plus/icons-vue'//图标
import { ref,onMounted,reactive } from 'vue'
import {Classgoodslist,classPagination} from '#/index'
import { ElMessage, ElTable,ElMessageBox  } from 'element-plus'
import { useRouter } from 'vue-router';
import Paging from '@/components/paging/Pagings.vue'
const router=useRouter()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const dialogFormVisible=ref(false)
const multipleSelection = ref(new Classgoodslist())
const pagination = reactive(new classPagination())//分页处理
let list =ref({
   _gp:'admin.product',
  _mt:'list',
  categoryId:'',
  title:'',
  status:'',
  page:1,
  limit:10,
  barcode:''
})
const tableData = ref([])
function init(){
   get(list.value).then(res=>{
      let {errmsg,errno,data}=res
      console.log(res);
      if (200==errno) {
         tableData.value=data.items
         pagination.total=data.total
      }
   })
}
// 富文本
//获取商品详情的数据
let details=ref()
function info(spuId: number) {
    let data = {
        _gp: 'admin.product',
        _mt: 'detail',
        spuId
    }
    post(data).then(res=>{
   dialogFormVisible.value=true
        console.log(res);
        let {data} = res
        details.value = data
    })
}
onMounted(() => {
   init()
})
const toggleSelection = (rows?:Classgoodslist) => {
  if (rows) {
   //  rows.forEach((row:Classgoodslist) => {
   //    // TODO: improvement typing when refactor table
   //    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //    // @ts-expect-error
   //    multipleTableRef.value!.toggleRowSelection(row, undefined)
   //  })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val:Classgoodslist ) => {
  multipleSelection.value = val
}

// 上下架处理
function handlegrounding(row:Classgoodslist){
   ElMessageBox.confirm(
    '此操作将冻结商品--'+row.title+'--是否继续？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
      let shelves={
      _gp:'admin.product',
      _mt:'freezeOrActivation',
      spuId :row.id,
      status:row.status?0:1 
   }
post(shelves).then(res=>{
   if (200==res.errno) {
      init()
      ElMessage.success(res.errmsg)
   } else {
      ElMessage.error(res.errmsg)
   }
   
}) 
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
// 动态路由传参
function handleupdate(id:number){
   router.push({
      name:'productmodify',
      params:{
         id
      }
   })
   
}

// 分页
function CurrentList(v: classPagination) {
   list.value.page = v.pageNo
   list.value.limit = v.pageSize
   init()
}


</script>
<style scoped>
.input-length {
   width: 200px;
   margin-right: 10px;
}
</style>